<template>
    <div class="album">
        <ul class="m-list clearfix">
            <li v-for="(album, index) in hotalbums" :key="index">
                <img v-lazy="album.blurPicUrl" />
                <router-link :to="{path:'/album',query:{id:`${album.id}`}}"></router-link>
                <p class="over name" :title="album.name">
                    <router-link :to="{path:'/album',query:{id:`${album.id}`}}" style="color:#333">{{ album.name }}</router-link>
                </p>
                <p class="over artist">
                    <span>{{album.publishTime}}</span>
                </p>
                <a class="play"></a>
            </li>
        </ul>
        <Pagination :pageNo='pageNo' :pageSize='pageSize' :total='total' :continues='5' @getPageNo="getPageNo"></Pagination>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    export default {
        name: "album",
        components:{Pagination},
        data() {
            return {
                hotalbums:[],
                pageNo:1,
                pageSize:12,
                total:0,
            }
        },
        computed:{
            id(){
                return this.$route.query.id;
            }
        },
        methods:{
            //获取歌手专辑
            async getAlbum(){
                let obj = await this.$API.reqArtistAlbums(this.id,this.pageSize,(this.pageNo-1)*this.pageSize);
                //   console.log(result);
                this.total = obj.result.artist.albumSize;
                this.hotalbums = obj.result.hotAlbums;

            },
            getPageNo(page){
                this.pageNo = page;
                this.getAlbum();
            }
        },
        mounted(){
            this.getAlbum();
        }
    }
</script>

<style scoped lang="less">
    .album {
        width: 640px;
        .m-list {
            margin: 20px 0 0 -18px;
            width: 658px;
            min-height: 416px;

            li {
                float: left;
                width: 163px;
                height: 205px;
                padding: 0 0 30px 18px;
                position: relative;
                img {
                    width: 120px;
                    height: 120px;
                }
                > a {
                    width: 145px;
                    height: 120px;
                    position: absolute;
                    top: 0;
                    left: 18px;
                    background: url("../../images/coverall.png") no-repeat -170px -850px;
                    &:hover {
                        cursor: pointer;
                    }
                }
                .name {
                    text-align: left;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    display: block;
                    margin: 8px 0 3px;
                    font-size: 14px;

                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
                .artist {
                    a:hover {
                        color: #666;
                    }
                }
                .play {
                    position: absolute;
                    width: 28px;
                    height: 28px;
                    left: 104px;
                    top: 90px;
                    background: url("../../images/iconall.png") no-repeat 0 -140px;
                    display: none;
                }
                &:hover .play {
                    display: block;
                }
            }
        }
    }
</style>